Add gestures and motion in Figma 在 Figma 中新增手勢與動效

教程：

互動由觸發 Trigger、動作 Action 和目的地 Destination 三個部分組成。

觸發 Trigger 指使用者透過什麼方式推動介面前進，例如滑鼠點選、觸控手勢或等待時間等。在 Figma 中，這個選項位於互動細節面板的第一個下拉選單中。

動作 Action 指觸發後系統發生的行為，例如跳轉到另一個介面或開啟外部連結。在本例中，選擇 Navigate To 表示從一個介面跳轉到另一個介面，這是最常見的螢幕切換動作。

目的地 Destination 指跳轉到的介面或疊加彈層 Overlay。在示例中，使用者點選首頁的預約按鈕後，跳轉到第一個預約介面。

動畫作用解釋（動畫的意義）

動畫決定介面切換時的運動方式，是讓原型具備動效的關鍵。Figma 提供八種動畫方式，例如 Instant（立即切換）、Slide In（滑入）等。

如果選擇 Instant，介面會瞬間切換，可能帶來生硬的體驗。選擇 Slide In 並指定方向可以讓介面更自然流暢，例如從螢幕底部向上滑入。

測試動畫效果（測試結果）

透過點選右上角的 Present 按鈕預覽原型。演講者先測試了 Instant 動畫，覺得不夠自然，因此改用 Slide In，自下向上滑入，並再次測試，效果更順滑。

關閉介面的動畫設定（關閉時的平衡設計）

為了讓關閉互動也保持一致體驗，需要為關閉按鈕 X 設定動畫。觸發設定仍為點選，在動畫中選擇 Slide Out 並向下滑出，與進入時相反，形成邏輯一致性。測試後，預覽效果正常。

至此，已經為介面新增了手勢和動效，並理解了如何透過多次嘗試調整至理想效果。

在完成示例介面的互動和動畫後，需要繼續為原型中所有頁面逐一新增連線、互動和動效，確保整個使用者流程完整連貫，最終組成可完整測試的體驗路徑。

原型完成後，可以透過 Figma 頂部右側的 Share 按鈕分享檔案。可以選擇允許他人檢視或編輯，從而獲取反饋或進行協作。